<template>
  <a-modal
    title="家庭成员"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item
          label="头像"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :customRequest="customRequest"
            :before-upload="beforeUpload"
          >
            <img
              class="u-img"
              v-if="articleImage"
              :src="articleImage"
              alt="avatar"
            >
            <div v-else>
              <a-icon :type="uploadloading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                上传图片
              </div>
            </div>
          </a-upload>
          <a-icon
            class="deleteimgicon"
            v-if="articleImage"
            @click="deleteImg"
            type="delete"
          />
          <span>（大小不要超过1M）</span>
          <!-- <CropUpload ref="cropUploadRef" :img-src="img" @successful="cropUploadSuccess" /> -->
        </a-form-item>
        <a-form-item
          label="姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="请输入姓名"
            v-decorator="['name', { rules: [{ required: true, message: '请输入姓名！' }] }]"
          />
        </a-form-item>

        <a-form-item
          label="与幼儿关系"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            allowClear
            placeholder="请选择！"
            v-decorator="['relationship', { rules: [{ required: true, message: '请选择！' }] }]"
          >
            <a-select-option
              v-for="item in relationList"
              :key="item.id"
              :value="item.id"
            >{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="手机"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入手机"
            v-decorator="[
              'phoneNumber',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入手机号！',
                    pattern: /^1[3456789]\d{9}$/,
                    message: '请输入正确的手机号'
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item
          label="工作单位"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入工作单位"
            v-decorator="['workplace', { rules: [{ required: false, message: '请输入工作单位！' }] }]"
          />
        </a-form-item>
        <a-form-item
          label="学历"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            allowClear
            placeholder="请选择学历！"
            v-decorator="['degree', { rules: [{ required: false, message: '请选择学历！' }] }]"
          >
            <a-select-option
              v-for="item in degreeList"
              :key="item.id"
              :value="item.id"
            >{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="考勤机卡号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="请输入卡号"
            v-decorator="['machineCardNumber', { rules: [{ required: false, message: '请输入卡号！' }] }]"
          />
        </a-form-item>

        <a-form-item
          label="是否主成员"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-radio-group
            v-decorator="['isPrincipalMember', { rules: [{ required: false, message: '请选择是否主成员！' }] }]"
          >
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { parentEdit, degreeList, relationList } from '@/api/modular/parent/parentManage'
import { sysFileInfoUploadApp } from '@/api/modular/system/fileManage'
import moment from 'moment'
export default {
  props: {
    classList: { type: Array }
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      classList1: [],
      dateFormat: 'YYYY-MM-DD',
      degreeList: [],
      relationList: [],
      uploadloading: false,
      articleImage: '',
      imgId: '',
      articleFile: null
    }
  },
  created() {
    this.degreeList = degreeList()
    this.relationList = relationList()
  },
  methods: {
    // 初始化方法
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id: record.id,
          name: record.name,
          phoneNumber: record.phoneNumber,
          workplace: record.workplace,
          degree: record.degree,
          relationship: record.relationship,
          machineCardNumber: record.machineCardNumber ? record.machineCardNumber : '',
          isPrincipalMember: record.isPrincipalMember ? record.isPrincipalMember : false
        })
        this.articleImage = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=' + record.imgId
        this.imgId = record.imgId
      })
    },

    classroomchange(val) {
      console.log(val)
      let _classroom = this.classroom1.find(item => {
        return item.id === val
      })
      this.classroomName = _classroom.cRoomName
    },

    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values['imgId'] = this.imgId
          parentEdit(values)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
    async beforeUpload(file, fileList) {
      console.log(file)
      this.articleFile = file
      let src = await this.fileToBase64(file)
      console.log(src)
      this.articleImage = src
      // return false
    },
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          resolve(e.target.result)
        }
      })
    },
    deleteImg() {
      this.articleImage = ''
      this.articleFile = null
      this.imgId = ''
    },
    customRequest(data) {
      console.log(this.form)
      const formData = new FormData()
      formData.append('file', data.file)
      sysFileInfoUploadApp(formData).then(res => {
        if (res.success) {
          this.$message.success('上传成功')
          this.articleImage = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=' + res.data
          this.imgId = res.data
        } else {
          this.$message.error('上传失败：' + res.message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.u-img {
  display: inline-block;
  height: 100%;
  width: 100%;
}
</style>
